<template>
	<view style="padding: 20px 30rpx;">
		<template v-for="item in list">
			<view :key="item.id" class="list-con">
				<view class="title"
					@click="goTo(`../../agricultureService/serviceDetails/serviceDetails?id=${item.serviceId}&sort=${item.serviceType}`)">
					{{item.title}}
				</view>
				<view class="uni-flex list-text-con"
					@click="goTo(`../../agricultureService/serviceDetails/serviceDetails?id=${item.serviceId}&sort=${item.serviceType}`)">
					<view class="list-text">
						<text class="summary">{{item.resume}}</text>
						<view class="uni-flex list-info">
							<view class="author">
								<!-- <text class="price">¥{{item.price}}</text> -->
							</view>
							<view class="see"><uni-icons type="eye" color="#9498A0"
									size="14"></uni-icons><text>{{item.browseNum}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="image" v-if="item.image">
						<image :src="imgUrl + item.image + '?x-image-process=style/style-list'"
							mode="widthFix"></image>
					</view>
					<view class="image" v-else>
						<image src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
							mode="widthFix"></image>
					</view> -->
					<view class="image" v-if="item.image">
						<image class="img-list" :src="imgUrl + item.image + '?x-image-process=style/style-list'"></image>
					</view>
					<view class="image" v-else>
						<image class="img-list" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png"
							></image>
					</view>
				</view>
				<view class="contact" @click="TakePhone(item.phone)">
					<view class="company"><text>{{item.providerName}}</text></view>
					<view class="takephone"><text style="color: #ffffff;">立即联系</text>
						<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</template>
		<uni-load-more :status="LoadMore" :content-text="contentText"
			></uni-load-more>
		<!-- <view class="list-con" @click="goTo('../serviceDetails/serviceDetails')">
			<view class="title">鱼塘淤泥太深清理 专业团队快速解决您的问题</view>
			<view class="uni-flex list-text-con">
				<view class="list-text">
					<text class="summary">淤泥如果超过了限度，不但减少了水体增加了池水耗...</text>
					<view class="uni-flex list-info">
						<view class="author">
							<text class="price">¥5</text>
						</view>
						<view class="see"><uni-icons type="eye" color="#9498A0" size="14"></uni-icons><text>1243</text>
						</view>
					</view>
				</view>
				<image class="image" src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png" mode="widthFix">
				</image>
			</view>
			<view class="contact">
				<view class=""><text>服务商：阳新实业</text></view>
				<view><text style="color: #ffffff;">立即联系</text>
					<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<view class="list-con" @click="goTo('../serviceDetails/serviceDetails')">
			<view class="title">鱼塘淤泥太深清理 专业团队快速解决您的问题</view>
			<view class="uni-flex list-text-con">
				<view class="list-text">
					<text class="summary">淤泥如果超过了限度，不但减少了水体增加了池水耗...</text>
					<view class="uni-flex list-info">
						<view class="author">
							<text class="price">¥5</text>
						</view>
						<view class="see"><uni-icons type="eye" color="#9498A0" size="14"></uni-icons><text>1243</text>
						</view>
					</view>
				</view>
				<image class="image" src="https://staticfile-yj.obs.myhuaweicloud.com/arcimg/list2.png" mode="widthFix">
				</image>
			</view>
			<view class="contact">
				<view class=""><text>服务商：阳新实业</text></view>
				<view><text style="color: #ffffff;">立即联系</text>
					<uni-icons type="phone-filled" color="#ffffff" size="16"></uni-icons>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		baseurl,
		pageFarmServiceQueryCollection
	} from "@/api/user.js";
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				list: [],
				page: 1,
				maxpage: 0,
				showLoadMore: false,
				imgUrl,
				LoadMore: 'noMore',
				contentText: {
					contentdown: '...',
					contentrefresh: '加载中',
					contentnomore: '暂无更多数据'
				},
			}
		},
		onLoad() {
			this.initData();
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page == this.maxpage) {
				this.LoadMore = 'noMore';
				return
			}
			this.LoadMore = 'loading';
			this.page++;
			this.pageFarmServiceQueryCollection({ //参数
				"condition": null,
				"pageNum": this.page,
				"pageSize": 10
			});
		},
		methods: {
			async pageFarmServiceQueryCollection(options) {
				const res = await pageFarmServiceQueryCollection(options)
				console.log(res);
				this.maxpage = res.returnObj.navigateLastPage;
				this.list = this.list.concat(res.returnObj.list);
				this.LoadMore = 'noMore';
			},
			initData() {
				this.page = 1;
				this.list = [];
				this.LoadMore = "loading";
				this.pageFarmServiceQueryCollection({ //参数
					"condition": null,
					"pageNum": this.page,
					"pageSize": 10
				});
				uni.stopPullDownRefresh();
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			TakePhone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.custom-fab {
		position: fixed;
		bottom: 60px;
		/* #ifdef MP-WEIXIN */
		bottom: 20px;
		/* #endif */
		right: 20rpx;

		.item {
			background-color: #00B5DD;
			color: #ffffff;
			border-radius: 8px;
			text-align: center;
			padding: 20rpx;
			line-height: 20px;
			margin-bottom: 10px;

			.text {
				display: block;
			}
		}
	}

	/* 搜索栏 */
	.search-bar /deep/ .uni-searchbar__box {
		justify-content: left !important;
	}

	.search-tips {
		padding: 2px 8px;
		height: 24px;
		line-height: 24px;
		background-color: #ffffff;
		border-radius: 20px;
		color: #505863;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	.service-list {
		padding: 30rpx 30rpx;
	}

	.segmented-control {
		background-image: linear-gradient(180deg, #D5F0FF 0%, rgb(255, 255, 255) 100%);
		border-radius: 12px 12px 0 0;
		height: 59px !important;
	}

	/deep/.segmented-control__text {
		font-size: 28rpx;
		width: 100%;
		height: 100%;
		display: block;
	}

	/deep/.segmented-control__item {
		height: 59px;
		line-height: 59px;
	}

	/deep/.segmented-control__item--text {
		font-size: 32rpx !important;
		font-weight: 500;
		border-bottom-color: #22AFFF;
	}

	.list-con {
		width: 100%;
		padding: 30rpx 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 8px;
		margin-bottom: 20px;
		margin-top: -10px;
	}

	.list-con .title {
		line-height: 26px;
		max-height: 52px;
		font-size: 36rpx;
		font-weight: 500;
		height: 26px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list-text-con {
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		height: 160rpx;
		overflow: hidden;
	}

	/* .list-text-con .image {
		border-radius: 8px;
		width: 240rpx;
		height: 160rpx;
		overflow: hidden;
		}
		
	.list-text-con .image image {
		width: 100%;
		border-radius: 8px;
		max-height: 160rpx;
	} */
	
	.list-text-con .image .img-list{
		border-radius: 8px;
		width: 240rpx;
		height: 160rpx;
		//overflow: hidden;
	}
	
	.list-text {
		flex-grow: 1;
		line-height: 22px;
		height: 160rpx;
		overflow: hidden;
	}

	.list-text .summary {
		font-size: 28rpx;
		line-height: 22px;
		height: 44px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-text .price {
		font-size: 40rpx;
		color: #FF5A5A;
	}
	
	.list-info{
		margin: 0;
	}
	
	.list-img {
		position: relative;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}

	.contact {
		background-color: #F5F8FB;
		border-radius: 4px;
		height: 38px;
		line-height: 38px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 0 20rpx;
		margin-top: 15px;
		
		.company {
			flex: 1;
			overflow: hidden;
			height: 38px;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		
		.takephone {
			background-image: url("https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/Rectangle%203467777.png");
			background-size: 100% 100%;
			width: 218rpx;
			height: 38px;
			line-height: 38px;
			box-sizing: border-box;
			padding-left: 20rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>